import React from 'react';
import {WeaErrorPage, WeaTools, WeaLocaleProvider} from 'ecCom';
import {openLinkUrl} from '../../util/common';
const getLabel = WeaLocaleProvider.getLabel;
import './style/';

//自定义菜单元素
class CustomMenuCom extends React.Component {
    render() {
        const {eid, esetting, data} = this.props;
        const {menuType} = esetting;
        let menuHtml = '';
        if (menuType == 'menuh') {
            menuHtml = getMenuHHtml(data, 0)
        } else if (menuType == 'menuv') {
            menuHtml = getMenuVHtml(data, 0)
        }

        return (
            <div id={`menu_${eid}`}>
                <div className={menuType}>{menuHtml}</div>
            </div>
        );
    }
}

const getMenuHHtml = (data, level, linkmode) => {
    return (
        <ul>
            {
                data.map(item => {
                    let status = "";
                    if(level == 0){
                        status = "/js/jquery/plugins/menu/menuh/down_wev8.gif";
                    }else{
                        status = "/js/jquery/plugins/menu/menuh/right_wev8.gif";
                    }

                    return (
                        <li>
                            <a href="javascript:;" title={item.name} onClick={() => {

                                openLinkUrl(item.href)
                            }} className={level == 0 ? 'main' : 'sub'}>{item.name}
                                {item.children.length!=0?<img style={{position :"absolute",top:"10px",right:"10px"}} src={status}/>:null}
                            </a>
                            {getMenuHHtml(item.children, level + 1)}
                        </li>
                    );
                })
            }
        </ul>
    );
};

const getMenuVHtml = (data, level) => {
    return data.map((item, index) => {
        return (
            <div className={index == 0 ? 'mainBg_top' : 'mainBg'}>
                <a href="javascript:;" title={item.name} onClick={() => {
                    openLinkUrl(item.href, item.target == 'mainFrame' ? '1' : '2')}} className="mainFont">{item.name}</a>
                {
                    item.children.map(item => {
                        return <a href="javascript:;" title={item.name} onClick={() => {
                            openLinkUrl(item.href, item.target == 'mainFrame' ? '1' : '2')
                        }} className="sub">{item.name}</a>;
                    })
                }
            </div>
        );
    });
};

class MyErrorHandler extends React.Component {
    render() {
        const hasErrorMsg = this.props.error && this.props.error !== "";
        return (
            <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@gn3zhw`} msg={hasErrorMsg ? this.props.error : getLabel(385218,"对不起，该页面异常，请联系管理员！")}/>
        );
    }
}

CustomMenuCom = WeaTools.tryCatch(React, MyErrorHandler, {error: ""})(CustomMenuCom);

export default CustomMenuCom;